<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/ccc.css">
	
</head>
<body>
	<header class="header">
		<!-- 头部左边背景 -->
		<div class="bg"></div>
		<!-- 头部右边链接 -->
		<div class="links">
			<a href="#">了解更多</a>|<a href="#">反馈意见</a>
		</div>
	</header>
	<!-- 内容区 -->
	<section class="content">
		<!-- 内容区头 -->
		<header class="content-tit">
			<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
		</header>
		<!-- 内容区体 -->
		<div class="mainBody-wrapper">

			<!-- 内容区左边 -->
			<div class="mainBody">
				<div class="regTabs">
					<ul>
					 	<li id="li0"><a href="#" style="color: #fff;">注册字母邮箱</a></li>
					 	<li id="li1"><a href="#">注册手机号码邮箱</a></li>
					 	<li id="li2"><a href="#">注册VIP邮箱</a></li>
					</ul>
				</div>
           
				<!-- 注册窗 -->
				<div class="fegForm" id="text0">
					<!-- 邮件地址 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>邮件地址
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt">
							<strong style="font-weight:bold;">@</strong>
							<select>
								<option selected="selected">163.com</option>
							</select>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
							</div>
						</dd>
					</dl>
					<!-- 密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 确认密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>

					<!-- 手机号码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机号码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" id="phone" value="+86" style="color:#999;width:322px;">
                             <!-- 国旗下拉列框 -->
								<div class="itlSelect">
								<a href="#" class="flag-CN"><em></em>中国  +86</a>
                                <a href="#" class="flag-AL"><em>&nbsp;</em>  阿尔巴尼亚(Shqipëria) +355</a>
                                <a href="#" class="flag-DZ"><em>&nbsp;</em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
                                <a href="#" class="flag-AF"><em>&nbsp;</em>阿富汗(Republic of Afghanistan) +93</a>
                                <a href="#" class="flag-AR"><em>&nbsp;</em>阿根廷(Argentina) +54</a>
                                <a href="#" class="flag-AE"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
                                <a href="#" class="flag-AW"><em></em>阿鲁巴(Aruba) +297</a>
                                <a href="#" class="flag-OM"><em></em>阿曼(Sultanate of Oman) +968</a>

                                </div>
							<div class="itl">
								<div class="itl-flag">
									<em></em>
								</div>
							</div>
							

							

							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
							</div>
						</dd>
					</dl>

					<!-- 验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title" style="top:22px;">
							<span class="txt-impt">*</span>验证码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" style="width: 196px; position:relative; top:0px;">
							<img src="images/call.jpg" class="vCode">
							<a href="#" class="switchvCode" tabindex="-1">&nbsp&nbsp&nbsp&nbsp&nbsp看不清楚？换张图片</a>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写图片中的字符，不区分大小写</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<!-- 短信验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
							</div>
						</dd>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							"同意"
							<a href="#">"服务条款"</a>
							"和"
							<a href="#">"隐私相关政策"</a>
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a class="btnReg">立即注册</a>
						</dd>
					</dl>
                  </div>


                <div class="fegForm" id="text1" style="display: none;">
                       <!-- 手机号码 -->
					   <dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机号码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt">
							<span class="u-domain">@VIP.163.com</span>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写手机号码</span>
							</div>
						</dd>
					</dl>

					<!-- 验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title" style="top:22px;">
							<span class="txt-impt">*</span>图片验证码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" style="width: 196px; position:relative; top:0px;">
							<img src="images/call.jpg" class="vCode">
							<a href="#" class="switchvCode" tabindex="-1">&nbsp&nbsp&nbsp&nbsp&nbsp看不清楚？换张图片</a>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写图片中的字符，不区分大小写</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<!-- 短信验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
							</div>
						</dd>

						<!-- 密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 确认密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							"同意"
							<a href="#">"服务条款"</a>
							"和"
							<a href="#">"隐私相关政策"</a>
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a class="btnReg">立即注册</a>
						</dd>
					</dl>
				</div>


				<div class="fegForm" id="text2" style="display:none;">
				   <div class="m-title">注册网易VIP邮箱，安全提升30%，享1对1服务，30元/月</div>

				   <dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>用户名
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt">
							
							<span class="u-domain">@VIP.163.com</span>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
							</div>
						</dd>
                         
                         <!-- 密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>安全手机
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">找回密码和认证时使用，不扣费</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机验证码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写手机验证码，不区分大小写</span>
							</div>
							
						</dd>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							"我已阅读并接受""
							<a href="#">"网易VIP邮箱服务条款"</a>
							
							
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a class="btnReg">立即注册</a>
						</dd>
					</dl>

					<!-- 注意事项 -->
					<div class="m-warn">温馨提示：注册3天内未支付，用户名将被回收，可能被他人抢注！</div>


					</dl>


					
				</div>

          


        









				
				
			</div>

			<!-- 内容区右边 -->
			<div class="mainBody-side">
				<div class="regExt">
					<img src="images/reg_master.gif" / id="img1">
				</div>

				<div class="regExt">
					<img src="images/reg_vip_163.gif" / id="img2" style="display:none;">
				</div>
			</div>
		</div>
	</section>

	<script type="text/javascript">

	function itlSelect(){
    //找到下拉列表的A标签
	var links=document.querySelectorAll('.itlSelect a');
    //给找到的A标签  绑定单击事件
	for (i = 0; i < links.length; i++) {
		links[i].addEventListener('click',function(e){
			var a=e.target;
           //获取A标签的文本内容
			var txt=a.innerText;

           //获取A标签的class类名
			var cls=a.className;

			console.log(txt+"--"+cls);

			//获取“+”所在的位置


			//截取字符串，获取“地区编码值”
            var area=txt.substr(txt.indexOf("+"), txt.length -  txt.indexOf("+"));

			//设置输入框 地区编码值
			document.querySelector('#phone').setAttribute('value',area);


		    //设置input输入的国旗标志
		    var p=document.querySelector('.itl-flag');
		    p.className=" itl-flag "+cls;



		})
	}
}
      function switchFlag(){
      	var Flag=document.querySelector('.itl');
      	// console.log(Flag);
      	/* 是谁响应点击事件*/
          Flag.addEventListener('click',function(e){
      		var d=e.target;
      		var panel=document.querySelector('.itlSelect'); 

             /*三元运算符可以用if else代替*/
      		// panel.style.display==='none'? panel.style.display='block':panel.style.display='none';

      		if(panel.style.display==='none'){
      			panel.style.display='block';
      		}else{
      			panel.style.display='none';
      		}

      	})

      }

    function switchTab(){
    var tabs=document.querySelectorAll('.regTabs ul li a');
    var ul=document.querySelector('.regTabs ul');
    

   var feg=document.querySelectorAll('.fegForm');
     // console.log(feg);

	for (i=0;i<tabs.length;i++) {
		tabs[i].index = i;
		tabs[i].addEventListener('click',function(e){
			var item=e.target;
			// console.log(item.index);
			ul.style.background='url(images/tab.jpg) 0 -'+item.index*55.5+'px';


for(var j=0;j<tabs.length;j++){
               	tabs[j].style.color = "#000";
               }
               item.style.color="#fff";

			
			// for(var k=0;k<li.length;k++){
			// 	li[k].index=k;
				
			// 	li[k].onclick=function(){
			// 		li[k].className='';
			// 		feg[k].style.display='none';
			// 	}
			// 	this.className='active';
			// 	feg[this.index].style.display='block';
			// }
			

			

		})
 
                
	}
	  

    }

   
    



switchFlag();
itlSelect();
switchTab();

    var Li0=document.getElementById('li0');
    var Li1=document.getElementById('li1');
    var Li2=document.getElementById('li2');
    var Img1=document.getElementById('img1');
    var Img2=document.getElementById('img2');
    console.log(Img2);


    var Text0=document.getElementById('text0');
    var Text1=document.getElementById('text1');
    // console.log(txt1);

    var Text2=document.getElementById('text2');


              Li0.onclick=inp0;
              function inp0(){
                     Text0.style.display='block';
                     Text1.style.display='none';
                     Text2.style.display='none';
                     Img1.style.display='block';
                     Img2.style.display='none';
              }

              Li1.onclick=inp1;
              function inp1(){
                     Text0.style.display='none';
                     Text1.style.display='block';
                     Text2.style.display='none';
                     Img1.style.display='block';
                     Img2.style.display='none';
                     // console.log(inp1);

              }

              Li2.onclick=inp2;
              function inp2(){
                    Text0.style.display='none';
                     Text1.style.display='none';
                     Text2.style.display='block';
                     Img1.style.display='none';
                     Img2.style.display='block';

              }

</script>



</body>
</html>